{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% set menus = ['store', 'authentication_setting'] %}

{% block title %}{{ 'admin.store.setting'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.store'|trans }}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block stylesheet %}
    <style>
        .modal #captcha_image {
            max-width: 400px;
            max-height: 50px;
            border: 1px #b9b9ba solid;
        }
    </style>
{% endblock %}

{% block javascript %}
<script>

    function refreshCaptchaImage() {
        $('#captcha_image').attr('src', "{{ eccube_config.eccube_package_api_url }}/captcha" + '?' + new Date().getTime())
    }

    $('#captcha').on('show.bs.modal', function() {
        refreshCaptchaImage();
    });

    $('#generate_key').on('click', function() {
        $.ajax({
            type: 'POST',
            url: "{{ eccube_config.eccube_package_api_url }}/api_key",
            dataType: 'json',
            cache: false,
            data: {
                "captcha": $('#captcha_text').val(),
                "eccube_url": '{{ eccubeUrl }}',
                "eccube_version": "{{ constant('Eccube\\Common\\Constant::VERSION') }}",
                "eccube_shop_name": "{{ eccubeShopName }}"
            },
            xhrFields: {
                withCredentials: true
            }
        }).done(function(data) {
            $('#captcha').modal('hide');
            $('#admin_authentication_authentication_key').val(data.api_key);
            $('#form').submit()
        }).fail(function(res) {
            if (res.status == 400) {
                $('#captcha_error').show();
                refreshCaptchaImage();
            } else {
                alert('{{ 'admin.common.system_error'|trans }}');
            }
        });
        return false;
    });
    $('#captcha-refresh').on('click', refreshCaptchaImage);
</script>
{% endblock %}


{% block main %}
    <form id="form" method="post" action="{{ url('admin_store_authentication_setting') }}">
    {{ form_widget(form._token) }}
        <div class="c-contentsArea__cols">
            <div class="c-contentsArea__primaryCol">
                <div class="c-primaryCol">
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <span>{{'admin.store.setting.get_api_key'|trans}}</span>
                        </div>

                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-12">
                                    <span>{{'admin.store.setting.get_api_key_info'|trans}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <button class="btn btn-primary" data-toggle="modal" data-target="#captcha" type="button">
                                        {{ 'admin.store.setting.get_api_key'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div><!-- /.box-body -->
                <div class="c-primaryCol">
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <span>{{'admin.store.setting.api_key_setting'|trans}}</span>
                        </div>

                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-12">
                                    <span>{{'admin.store.setting.api_key_setting_info'|trans}}</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <div class="d-inline-block">
                                        <span>{{ form.authentication_key.vars.label|trans }}</span>
                                        <i class="fa fa-question-circle fa-lg" data-tooltip="true" data-placement="top" title={{'admin.store.setting.api_key_tooltip'|trans}}></i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    {{ form_widget(form.authentication_key) }}
                                </div>
                            </div>
                        </div>
                    </div>

                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div><!-- /.col -->
        <div class="c-conversionArea">
            <div class="c-conversionArea__container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-6">
                        <div class="c-conversionArea__leftBlockItem">
                            <a class="c-baseLink" href="{{ url('admin_store_plugin') }}">
                                <i class="fa fa-backward" aria-hidden="true"></i>
                                <span>{{ 'admin.store.plugin.plugin_list'|trans }}</span></a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row align-items-center justify-content-end">
                            <div class="col-auto">
                                <button class="btn btn-ec-conversion px-5" type="submit">{{'admin.common.registration'|trans}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="modal fade" id="captcha" tabindex="-1" role="dialog" aria-labelledby="captcha" aria-hidden="true">
        <form id="captcha-form" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">{{ 'admin.store.setting.get_api_key'|trans }}</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body text-left">
                        <p>新しい認証キーを発行します。既に認証キーがある場合は、発行せずに既存のキーを設定してください。</p>
                        <img id="captcha_image" class="mb-2" src="#">
                        <button id="captcha-refresh" type="button" class="btn btn-default"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                        <input type="text" id="captcha_text" value="" class="form-control" placeholder="{{ 'admin.store.setting.captcha_message'|trans }}"/>
                        <span id="captcha_error" class="invalid-feedback" style="display: none">
                            <span class="mb-0 d-block">
                                <span class="initialism form-error-icon badge badge-danger">{{ 'admin.store.setting.captcha_error'|trans }}</span> <span class="form-error-message">{{ 'admin.store.setting.invalid_captcha'|trans }}</span>
                            </span>
                        </span>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-ec-sub" type="button" data-dismiss="modal">{{ 'common.cancel'|trans }}</button>
                        <button id="generate_key" class="btn btn-ec-conversion" type="button">{{ 'admin.store.setting.get_api_key'|trans }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}